<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>我的</title>
		<script src="../js/vue.js"></script>
		<script src="../js/axios.min.js"></script>
		<script src="../js/elementui.js"></script>
		<script src="../js/common.js"></script>
		<link rel="stylesheet" href="../css/index.css" />
		<link rel="stylesheet" href="../css/mine.css" />
		<script src="../js/jquery3.5.1.js"></script>
		<link href="../layui/css/layui.css" rel="stylesheet">
		<link href="../css/myvideo.css" rel="stylesheet">
		<script src="../layui/layui.js"></script>
		<script src="../js/mine.js"></script>
	</head>
	<body>
		<div id="app">
			<div id="mine">
				<div id="minetow">
					<img class="bj" src="../img/背景.jpg">
					<img class="tou" :src="userinfo.headImg" />
					<div class="douname">{{userinfo.userName}}</div>
					<span class="guanzhu">
						<span class="meg">关注</span>&nbsp;&nbsp;<strong>{{attsNum}}</strong>&nbsp;&nbsp;&nbsp;&nbsp;<span
							class="meg">|</span>&nbsp;&nbsp;
						<span class="meg">粉丝</span>&nbsp;&nbsp;<strong>{{fansNum}}</strong>&nbsp;&nbsp;&nbsp;&nbsp;<span
							class="meg">|</span>&nbsp;&nbsp;
						<span class="meg">获赞</span>&nbsp;&nbsp;<strong>{{likecountnum}}</strong>
					</span>
					<span class="conte">{{userinfo.synopsis}}</span>
					<img class="sex" v-if="showSex" :src="seximg" />
					<span class="douid">逗比号：{{userinfo.userAccount}}</span>
					<div class="but">
						<el-button id="compile" onclick="location.href='compile.html'" round>编辑资料</el-button>
					</div>
				</div>
			</div>
			<div id="content">
				<template v-for="obj in text">
					<div class="text" @click="selectType(obj.name)" :id="obj.id">{{obj.name}}</div>
				</template>
			</div>
			<div id="box">
				<template v-for="obj in releaseList">
					<div class="video">
						<div @click="intoviode(obj)" @mouseout="mousout(obj)" @mouseover="mousin(obj)"
							:id="obj.releaseNum" class="image-container">
							<img class="tu" :src="obj.worksCover" />
						</div>
						<div class="xin">
							<!-- <i class="layui-icon layui-icon-heart" :id="'i'+obj.releaseNum" style="font-size: 15px; color: white;"></i>
							 -->
							<svg style="color: white;" viewBox="0 0 24 24" fill="none"
								xmlns="http://www.w3.org/2000/svg" width="15px" height="15px" focusable="false"
								huiyi-exclude-el="m">
								<path :id="'i'+obj.releaseNum" fill-rule="evenodd" clip-rule="evenodd"
									d="M2.00534 9C2.00179 8.91711 2 8.83376 2 8.75C2 5.57436 4.57436 3 7.75 3C9.43372 3 10.9484 3.72368 12 4.87696C13.0516 3.72368 14.5663 3 16.25 3C19.4256 3 22 5.57436 22 8.75C22 8.83376 21.9982 8.91711 21.9947 9H22C22 13.5738 14.6263 19.141 12.5425 20.6229C12.2133 20.8571 11.7867 20.8571 11.4575 20.6229C9.37369 19.141 2 13.5738 2 9H2.00534Z"
									fill="currentColor"></path>
							</svg>
							<span class="num">{{obj.likeNum}}</span>
						</div>
						<div class="tile">{{obj.title}}</div>
						<span class="datet">{{obj.releaseTime}}</span>
					</div>
				</template>
				<!-- <iframe id="video" onscroll="no" src="mineVideo.html" frameborder="0"></iframe> -->
			</div>

		</div>
	</body>
	<script>
		let app = new Vue({
			el: "#app",
			data: {
				attsNum: 0,
				fansNum: 0,
				releaseList: 0,
				userinfo: {},
				text: [{
					id: "zuo",
					name: "作品"
				}, {
					id: "like",
					name: "喜欢"
				}, {
					id: "hotroy",
					name: "历史"
				}],
				showSex: true,
				seximg: '../img/男.png',
				likecountnum: 20
			},
			methods: {
				selectType(obj) {
					let uid = window.localStorage.getItem("userid");
					if (obj === "喜欢") {
						axios.get(API + "selectMyLike?&uid=" + uid).then(res => {
							this.releaseList = res.data
						})
					} else if (obj === "历史") {
						axios.get(API + "selectMyHistroy?&uid=" + uid).then(res => {
							this.releaseList = res.data
						})
					} else {
						axios.get(API + 'selMyRelease?userId=' + uid).then(response => {
							this.releaseList = response.data
						}).catch(error => {
							console.error(error);
						});
					}
				},
				intoviode(obj) {
					console.log(obj.releaseId)
					console.log(obj.userId)
					window.sessionStorage.setItem("releaseId", obj.releaseId)
					window.sessionStorage.setItem("userId", obj.userId)
					window.open("http://127.0.0.1:8848/doubi/RecommLook.html")
				},
				mousout(obj) {
					$("#" + obj.releaseNum).html("<img class='tu' src='" + obj.worksCover + "' />");
					$("#" + obj.releaseNum).next().css("visibility", "visible")
				},
				mousin(obj) {
					axios.post(API + "selectMyVoide?releaseId=" + obj.releaseId).then(res => {
						let videosSrc = res.data.videosSrc;
						$("#" + obj.releaseNum).html(
							"<video autoplay muted loop  class='tu' width='246' height='138' poster='" +
							obj.worksCover + "'> " +
							"<source  src='" + videosSrc + "' type='video/mp4'> </video>");
						$("#" + obj.releaseNum).next().css('visibility', 'hidden');
					})

				},
				initData() {
					this.userinfo.userId = window.localStorage.getItem("userid");
					axios.get(API + "selectUserInfo?userid=" + this.userinfo.userId).then(res => {
						//获取数据
						this.userinfo = res.data;
						if (this.userinfo.gender === 1) {
							this.userinfo.gender = "女";
							this.showSex = true;
							this.seximg = '../img/女.png';
						} else if (this.userinfo.gender === 0) {
							this.userinfo.gender = "男";
							this.showSex = true;
							this.seximg = '../img/男.png';
						} else {
							this.userinfo.gender = "保密";
							this.showSex = false;
						}
						if (this.userinfo.userName.length > 4) {
							let num = this.userinfo.userName.length * 10
							$(".sex").css("left", num + 235 + "px");
							$(".douid").css("left", num + 265 + "px");
						}
					})

				}
			},
			mounted() {
				let uid = window.localStorage.getItem("userid");
				this.initData();
				axios.get('http://localhost:8080/doubi/findAtt?userId=' + uid).then(response => {
					localStorage.setItem("attsNum", response.data.length)
					this.attsNum = response.data.length
					localStorage.setItem("findAttList", JSON.stringify(response.data))
				}).catch(error => {
					console.error(error);
				});
				axios.get('http://localhost:8080/doubi/findFans?userId=' + uid).then(response => {
					localStorage.setItem("fansNum", response.data.length)
					this.fansNum = response.data.length
					localStorage.setItem("findFansList", JSON.stringify(response.data))
				}).catch(error => {
					console.error(error);
				});

				//查询总喜欢数
				axios.get(API + "selectCount?uid=" + uid).then(res => {
					this.likecountnum = res.data;
				})
			},
			beforeCreate() {
				let uid = window.localStorage.getItem("userid");
				axios.get('http://localhost:8080/doubi/selMyRelease?userId=' + uid).then(response => {
					this.releaseList = response.data
					console.log(response.data)

				}).catch(error => {
					console.error(error);
				});
			},
			updated() {
				//查询是否喜欢
				for (let i = 0; i < this.releaseList.length; i++) {
					if (this.releaseList[i].ifLike == true) {
						$("#i" +this.releaseList[i].releaseNum).attr("class", "love")
					}else{
						$("#i" +this.releaseList[i].releaseNum).attr("class", "love1")
					}
				}
			}
		})
	</script>
</html>